<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Find the closest office to you</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" href="styles/canvas.css" />
<link rel="stylesheet" href="styles/my.css" />
</head>
<body>

	<div data-role="page" id="atm" data-theme="b">
		<div data-role="header" data-theme="b" data-position="inline"
			class="classHeader">
			<a href="#home" data-icon="home" data-iconpos="notext"
				data-direction="reverse" class="ui-btn-left jqm-home">Options</a>
			<h1>The closest Location to you</h1>
		</div>

		<div data-role="content" id="map_canvas"></div>

		<div data-role="footer" data-position="fixed" data-theme="b"
			class="classFooter">
			<h1>Copyright © 2012.</h1>
		</div>

	</div>
	
	<script
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script
        src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    <script src="js/ember-0.9.7.1.js"></script>
    <script src="js/search.js"></script>

<!--
	<section id="wrapper">
-->
		<script type="text/javascript"
			src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA3UFDRAMTb6tTePfPy-gMtpaf0HIkqzSI&sensor=true"></script>
		<article></article>
		<script>
			function success(position) {
				/* var mapcanvas = document.createElement('div');
				mapcanvas.id = 'mapcontainer';
				mapcanvas.style.height = '800px';
				mapcanvas.style.width = '600px'; */

				//document.querySelector('article').appendChild(mapcanvas);

				var coords = new google.maps.LatLng(position.coords.latitude,
						position.coords.longitude);
				console.log(coords);

				var options = {
					zoom : 12,
					center : coords,
					mapTypeControl : false,
					navigationControlOptions : {
						style : google.maps.NavigationControlStyle.SMALL
					},
					mapTypeId : google.maps.MapTypeId.ROADMAP
				};
				var map = new google.maps.Map(document
						.getElementById("map_canvas"), options);

				var marker = new google.maps.Marker({
					position : coords,
					map : map,
					title : "Your location"
				});

				//document.querySelector('article').appendChild(mapcanvas);

				var coords = new google.maps.LatLng(position.coords.latitude,
						position.coords.longitude);
				console.log(coords);

				var options = {
					zoom : 10,
					center : coords,
					mapTypeControl : false,
					navigationControlOptions : {
						style : google.maps.NavigationControlStyle.SMALL
					},
					mapTypeId : google.maps.MapTypeId.ROADMAP
				};
				var map = new google.maps.Map(document
						.getElementById("map_canvas"), options);
				
				var image = 'images/my_location.png';
				var marker = new google.maps.Marker({
					position : coords,
					map : map,
					title : "Your Location",
					icon: image
				});
				$.ajax({
					url : "../rest/location/"
							+ position.coords.latitude + "/"
							+ position.coords.longitude + "/",
					dataType : 'json',
					data : null,
					async : true,
					success : function(data) {
						var coords = new google.maps.LatLng(
								data.coordinates.latitude,
								data.coordinates.longitude);
						console.log("Closest location: " + coords);

						var marker = new google.maps.Marker({
							position : coords,
							map : map,
							title : data.name
						});
					}
				});
			}

			if (navigator.geolocation) {
				navigator.geolocation.getCurrentPosition(success);
			} else {
				error('Geo Location is not supported');
			}
		</script>
		<!--
	</section>
	-->
</body>
</html>